<script setup>
import {ref, defineProps} from 'vue'
import {useRouter} from 'vue-router'

const props = defineProps({
  data: Object,
  loading: Boolean
})

const fileUrl = import.meta.env.VITE_FILE_URL

const router = useRouter()

const goScenicMerchantsClick = () => {
  router.push(`/scenic/merchants/${props.data?.businessId}`)
}

</script>

<template>
  <div class="card">
    <div v-if="!props.loading" @click="goScenicMerchantsClick">
      <div class="image_box">
        <van-image
          lazy-load
          width="100%"
          height="100%"
          :src="`${fileUrl}/${data?.pictureId}`"
          radius=".8rem"
        />
      </div>
      <div class="name">
        <h3>{{ data?.businessName || '商家名称' }}</h3>
        <div class="name_tab_list">
          <div class="tag name_tab">在售商品 3000</div>
        </div>
      </div>
      <div class="tab_list">
        <div class="tag tab_item">满200-20</div>
        <div class="tag tab_item">满400-60</div>
      </div>
    </div>
    <van-skeleton v-else>
      <template #template>
        <div :style="{  width: '100%' }">
          <van-skeleton-image :style="{  width: '100%' }"/>
          <div :style="{ margin: '.8rem 0' }">
            <van-skeleton-paragraph row-width="10rem"/>
            <van-skeleton-paragraph row-width="10rem"/>
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
</template>

<style scoped lang="scss">
.tag{
  height: 1.7rem;
  line-height: 1.7rem;
  padding: 0 .6rem;
  border-radius: .3rem;
  opacity: 1;
  font-size: 1.2rem;
}
.card {
  padding: 1rem;
  background: #FFFFFC;
  box-shadow: 0 1.2rem 2rem 0 rgba(2,95,38,0.05);
  border-radius: 1rem;

  .image_box {
    //padding: .8rem 0;
  }

  .name {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    h3{
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
      margin-right: .6rem;
    }
    .name_tab_list{
      display: flex;
      align-items: center;
      .name_tab{
        background: rgba(0,0,0,0.06);
        color: #666666;
      }
    }
  }

  .tab_list {
    display: flex;
    margin: .6rem 0;
    .tab_item{
      background: rgba(237,99,22,0.1);
      color: #ED6316;
    }
  }
}
</style>